<template>
  <div class="left_box">
    <el-tabs type="border-card" v-model="tabs">
      <el-tab-pane label="好友" name="1">
        <div class="addUser">
          <el-button
            type="primary"
            class="btn"
            @click="addUser"
            icon="Plus"
            color="#f39c12">
            添加好友
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="群聊" name="2">
        <div class="addBox">
          <el-button
            type="primary"
            class="btn"
            @click="addRoomBtn"
            icon="Plus"
            color="#f39c12">
            创建聊天室
          </el-button>
        </div>
        <div class="roomList">
          <div
            v-for="(t, i) in roomList"
            :class="isActive == t.roomId ? 'roomItem' : 'roomItemStyle'"
            :key="i"
            @click="handoff(t)">
            <span class="roomName-title">房间名称：{{ t.roomName }}</span>
            <div class="delbox">
              <span class="roomId-title">房间号：{{ t.roomId }}</span>
              <el-button
                size="small"
                type="danger"
                plain
                @click.stop="delRoomBtn(t)">
                删除
              </el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

  <!-- 创建房间 -->
  <el-dialog
    v-model="dialogVisible"
    title="创建房间"
    width="500"
    :before-close="handleClose">
    <div class="roomName">
      <el-input v-model="roomName" placeholder="请输入房间名称" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="addRoomTrue"> 创建 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加好友 -->
  <el-dialog
    v-model="userDialogVisible"
    title="添加好友"
    width="600"
    :before-close="userHandleClose"
    :close-on-click-modal="false"
    >
    <div class="roomName">
      <el-input v-model="userName" placeholder="请输入好友名称">
        <template #append>
          <el-button icon="Search" @click="searchUserBtn" />
        </template>
      </el-input>
      <div class="userBox">
        <div v-if="userList.length" class="userInfoBox">
          <div v-for="(item, index) in userList" :key="index" class="userItem">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <div>用户名：{{ item.userName }}</div>
            <div>性别：{{ item.userSex ? "男" : "女" }}</div>
            <div>年龄：{{ item.userAge }}</div>
            <div style="width: 100%;">
              <el-button @click="searchUserBtn" color="#a29bfe" size="small" style="width: 100%;">申请</el-button>
            </div>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据" />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="userHandleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  addRoom,
  selRoom,
  delRoom,
  searchUser,
} from "../../../utils/https/api";
import storage from "../../../storage/storage";
import EventBus from "../../../utils/evenBus/evenBus";
//房间列表
let roomList = ref([]);
//房间名称
let roomName = ref("");
//用户信息
let userInfo = ref({});
//弹窗开关
let dialogVisible = ref(false);
//添加好友开关
let userDialogVisible = ref(false);
//用户名称
let userName = ref("");
//点击打开添加弹窗
let addRoomBtn = () => {
  dialogVisible.value = true;
};
//当前房间选中状态
let isActive = ref(0);
//好友 群聊 切换
let tabs = ref("1");
//好友列表
let userList = ref([]);

onMounted(() => {
  userInfo.value = JSON.parse(storage.getCookies("userInfo"));
  selRoomList();
});

//关闭添加弹窗
let handleClose = () => {
  roomName.value = "";
  dialogVisible.value = false;
};

//关闭添加好友弹窗
let userHandleClose = () => {
  userName.value = "";
  userDialogVisible.value = false;
  userList.value = []
};

let addRoomTrue = () => {
  if (!roomName.value.trim()) {
    return ElMessage.error("信息不能为空");
  }
  let data = {
    created: userInfo.value.id,
    roomName: roomName.value,
  };
  addRoom(data).then(() => {
    ElMessage.success("创建成功");
    roomName.value = "";
    dialogVisible.value = false;
    selRoomList();
  });
};

let selRoomList = () => {
  selRoom({ id: userInfo.value.id }).then((res) => {
    console.log(res);
    roomList.value = res.data || [];
    isActive.value = roomList.value[0]?.roomId || "";
    EventBus.emit("roomInfo", roomList.value[0]);
  });
};

//打开添加好友弹窗
let addUser = () => {
  userDialogVisible.value = true;
};

let handoff = (t) => {
  isActive.value = t.roomId;
  EventBus.emit("roomInfo", t);
};

let delRoomBtn = (t) => {
  let bol = t.created == userInfo.value.id;
  ElMessageBox.alert(`确定要${bol ? "解散" : "退出"}该群聊吗`, "警告", {
    confirmButtonText: "确定",
    callback: () => {
      let data = {
        userId: t.created,
        roomId: t.roomId,
      };
      delRoom(data).then((res) => {
        ElMessage.success(res.msg);
        selRoomList();
      });
    },
  });
};

let searchUserBtn = () => {
  searchUser({ userName: userName.value }).then((res) => {
    console.log("好友列表", res);
    userList.value = res.data || [];
  });
};
</script>

<style scoped>
.left_box {
  border-radius: 10px;
  box-sizing: border-box;
  padding: 5px 10px;
  background: #d7b35f;
  box-shadow: 0px 0px 10px #000;
  min-width: 200px;
  height: 100%;
  overflow: hidden;
}

.addBox,
.addUser {
  width: 100%;
  padding: 15px 0;
  box-sizing: border-box;
}

.btn {
  width: 100%;
}

.roomList {
  height: 53vh;
  overflow-y: scroll;
}

.roomList::-webkit-scrollbar {
  display: none;
}

.roomName,
.roomId {
  margin: 20px 0;
}

.roomItem {
  border-radius: 5px;
  padding: 10px;
  background: #c7ecee;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.roomItemStyle {
  border-radius: 5px;
  padding: 10px;
  background: #c7c6b6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.roomName-title {
  color: #a35f65;
  font-weight: bold;
  font-size: 12px;
}

.roomId-title {
  font-size: 12px;
  margin-top: 5px;
}

.delbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.userInfoBox {
  display: flex;
  flex-wrap: wrap;
}

.userBox {
  height: 40vh;
  background: #fff;
  box-shadow: 0 0 5px #000;
  margin-top: 20px;
  border-radius: 10px;
}

.userItem {
  width: calc(100% / 3 - 30px);
  margin: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #82ccdd;
  box-shadow: 0 0 5px #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
</style>
<style>
.el-tabs__nav-scroll {
  background: #d7b35f;
}

.el-tabs__item {
  padding: 0 30px !important;
  border-radius: 20px;
  color: #e15f41 !important;
}

.el-tabs__content {
  background: #d7b35f;
  padding: 0 !important;
}

.el-tabs--border-card {
  border: none;
}

.el-dialog {
  background: #d7b35f;
}
</style>
